[% pagetitle = "HOME" | string;
pageicon = 'MUSIC';
browse = '1';
music = '1';
playlist = '0';

thispage = 'home';

IF ajaxRequest;
	'<pre>';
	PROCESS ajaxRequest.txt page = thispage;
	'</pre>';
ELSIF runAlarm;
	PROCESS alarm_set.html;
ELSIF runSleep;
	PROCESS sleep_set.html;
ELSIF runRescan;
	PROCESS rescan_set.html;
ELSE;

title = 'SqueezeCenter';
homeString = 'IPENG_BUTTON_HOME' | string; 
goHomeURI = 'href = "' _ webroot _ 'home.html?player=' _ playerURI _ '"'; #  "HOME" | string
pageHeaderScripts = PROCESS HomeHeader;
PROCESS iHeaderVert.html noShowBar = 1;

BLOCK HomeHeader %]

	<style>
/*	body > div > ul > li > a, .panel > ul > li > a
	{
		display: block;
		
		padding: 9 9 11 9;
		margin: -9 -9 -11 -9;
		
		border: 0px;
		-webkit-border-radius: 8px;
		-webkit-tap-highlight-color: rgba(25,79,219,0.5);
		
		text-decoration: none;
		color:black;
	}*/
	div#bottombar {
		position: absolute;
		top: 368;
		left: 0;
		background-image: url([% webroot %]html/images/iBottomBar.png);
		color: white;
		font-size: 12;
		font-weight: bold;
		padding: 0;
		border-top: 1px solid black;
		border-bottom: 0px;
		margin: 0;
		width: 320px;
		height: 48px;
		overflow: hidden;
		z-index: 10;
	}
	
	</style>
	<style type="text/css" media="screen">@import "[% webroot%]html/iui/iPiui.css";</style>
	
	<script type="text/javascript">[% PROCESS html/vars.js %]</script>
	<script src="[% webroot %]html/prototype1.js?r=[% revision %]" type = 'text/javascript' defer></script>
	<script src="[% webroot %]html/prototype2.js?r=[% revision %]" type = 'text/javascript' defer></script>
	<script src="[% webroot %]html/prototype3.js?r=[% revision %]" type = 'text/javascript' defer></script>
	<script src="[% webroot %]html/prototype4.js?r=[% revision %]" type = 'text/javascript' defer></script>
	<script src="[% webroot %]html/prototype5.js?r=[% revision %]" type = 'text/javascript' defer></script>
	<script type="application/x-javascript" src="html/iui/iPiui.js" defer></script>
	<script src="[% webroot %]html/global.js?r=[% revision %]" type = 'application/x-javascript' defer></script>
	<!--script src="[% webroot %]html/skin_global.js?r=[% revision %]" type = 'application/x-javascript' defer></script-->
	
	<script type="text/javascript"> // need some inline code...

	var url = 'status.html';
	
	var bottombarTop = 368;
	var topbarHeight = -4; // should be 44, consider this to be a bug in MS, but MS expands every div to at least 100% height...
	
	var Pi = 3.14159265;

	// Synchronization
	
	[%- USE Clients; 
	players = Clients.get("id");
	c_playername = ''; 
	FOREACH playerobj IN players;
		IF player == playerobj.id;
			c_playername = playerobj.name;
		END;
	END %]
	
	function playerSubmit(me) {
		if (me.value == "sync") {
			refreshElement('currentplayername', "[% IF c_playername; c_playername; ELSE; player; END %]");
			$('player').blur();
			scrollOverlayUp('FullBG', 'PCDiv', -45, true);
			$('synchronize').focus();
			var sArray = [ 'sync', '?' ];
			callJSONRPC(sArray, function (r2) { 
			 	var selnone = true;
				[%-	players = Clients.get("id");
				FOREACH playerobj IN players %]
					if ($('player[% playerobj.id %]'))
						if (r2.result._sync.include('[% playerobj.id %]')) {
					 		$('player[% playerobj.id %]').selected = true;
					 		$('player[% playerobj.id %]').isSynced = true;
					 		selnone = false;
					 	} else {
					 		$('player[% playerobj.id %]').selected = false;
					 		$('player[% playerobj.id %]').isSynced = false;
						}
			 	[% END %]
			 	if (!selnone) {
					$('playernone').selected = false;
				}
				});
		} else {
			me.parentNode.submit();
		}
	}
			
	function SyncSubmit() {
	 	var nosel = false;
	 	if ($('playernone').selected) nosel = true;
		[%- USE Clients; players = Clients.get("id") -%]
		[% FOREACH playerobj IN players %]
			if ($('player[% playerobj.id %]'))
				if ($('player[% playerobj.id %]').selected && (!$('player[% playerobj.id %]').isSynced) && (!nosel)) {
					var sArray = [ 'sync', '[% player %]' ];
					callJSONRPC(sArray, function (r2) {}, function (r2) {}, '[% playerobj.id %]');
				} else if ((!$('player[% playerobj.id %]').selected || nosel) && $('player[% playerobj.id %]').isSynced) {
					var sArray = [ 'sync', '-' ];
					callJSONRPC(sArray, function (r2) {}, function (r2) {}, '[% playerobj.id %]');
				}
	 	[% END %]
		scrollOverlayUp('FullBG', 'PCDiv', -45, false);
		document.forms['PCDiv'].submit();
	}
	
	function syncCancel() {
		scrollOverlayUp('FullBG', 'PCDiv', -45, false);
		$('do_sync').selected = false;
		$('[% player %]').selected = true;
	}
	
	function playerSelectMe (me) {
	 	if (me.value == 'none')
	 		playerUnselectAll ();
	 	else
			if ($('player' + me.value).selected)
				$('player' + me.value).selected = false;
			else {
				$('player' + me.value).selected = true;
				$('playernone').selected = false;
			}
	}
	
	function playerUnselectAll() {
		[%- USE Clients; players = Clients.get("id") -%]
		[%- FOREACH playerobj IN players %]
			if ($('player[% playerobj.id %]'))
			 	$('player[% playerobj.id %]').selected = false;
	 	[%- END %]
	 	$('playernone').selected = true;
	}


	// OnLoad
	
	window.onload = function() {
		globalOnload();
	}
	</script>

	<!--script src="[% webroot %]html/home.js?r=[% revision %]" type = 'text/javascript'></script-->
[% END %]



<!--div class="toolbar" id = "topbar_vert" style = "height: 44;">
    <h1 id="pageTitle"></h1>

	<div style = 'position: absolute; right: 4; top: 4; z-index: 12;'>
	<a class="blackRight iButton" href="[% webroot %]status.html?player=[% playerURI %]" style = "color: white; width: 43; padding: 0; text-align: right;"  target="_self"><img src = "[% webroot %]html/images/coolioicon.png" style = "padding-right: 10"></a>
	</div>

    <a id="backButton" class="button" style = "z-index: 14; color: white;" href="#"></a>
</div-->


[%- PROCESS homeTopbar; %]


<script>storeReturnPage();</script>


[%- PROCESS browseDatabase;
IF !additionalLinks.browseiPeng.PLUGIN_IPENG_CUSTOM_BROWSE_MORE;
	PROCESS browseLists;
END;
PROCESS browseSettings;
PROCESS browseRadio;
#PROCESS musicServices;
#PROCESS alarmSet;
-%]


<div id = "main" 
		title = "[% 'IPENG_BUTTON_HOME' | string %]" 
		class = "MenuPage panel"
		style = "-webkit-transform: translateX(0px);"
		selected = 'true'>
<ul>
	<li class = "biggerLine">
		<a href="#Database">
		<img src="[% webroot %]html/images/iSongWhite.png" width="40" height="30" class = "paddedPic" alt = 'radio'>&nbsp;
		[% 'IPENG_BROWSE_LIBRARY' | string %]</a>
	</li>
	<li class = "biggerLine">
	[%- IF additionalLinks.browseiPeng.PLUGIN_IPENG_CUSTOM_BROWSE_MORE %]
		<a href="[% webroot %][% additionalLinks.browseiPeng.PLUGIN_IPENG_CUSTOM_BROWSE_MORE %]&player=[% playerURI %]" target="_self">
		<img src="[% webroot %][% additionalLinks.icons.${'PLUGIN_IPENG_CUSTOM_BROWSE_MORE'}.replace('.png', "_40x30_f.png") %]" width="40" height="30" class = "paddedPic">&nbsp;
		<span class="secondary">[% 'PLUGIN_IPENG_CUSTOM_BROWSE_MORE' | string %]</span></a>
	[%- ELSE -%]
		<a href="#Lists">
		<img src="[% webroot %]html/images/iBookWhite.png" width="40" height="30" class = "paddedPic" alt = 'radio'>&nbsp;
		[% 'IPENG_BROWSE_MORE' | string %]</a>
	[%- END -%]
	</li>
</ul>
<ul>
	<li class = "biggerLine">
		<a href="#Radio">
		<img src="[% webroot %]html/images/iRadioWhite.png" width="40" height="30" class = "paddedPic" alt = 'radio'>&nbsp;
		<span class="secondary">[% 'RADIO' | string %]</span></a>
	</li>
[%- IF additionalLinks.music_services && 0 %]
	<li class = "biggerLine">
		<a href="#MusicServices">
		<img src="[% webroot %]html/images/iRadioWhite.png" width="40" height="30" class = "paddedPic" alt = 'radio'>&nbsp;
		<span class="secondary">[% 'MUSIC_SERVICES' | string %]</span></a>
	</li>
[% END;
	
'</ul>';

PROCESS playerChoose;

'<ul>'; %]
	<li class = "biggerLine">
		<a href="#browseSettings">
		[%- "PLUGINS" | string; '</a>';
	'</li>';
'</ul>';


# END;

-%]
<div id = "iPengName" class = "iPengName">iPeng v0.5 (C) 2007, 2008 J. Schwieder, E. Isaksson</div>
[%- PROCESS spacer;
'</div>';

PROCESS iFooterVert.html selectedButton = 'Home' context = 'home' classFooter = " selected = 'true' class = 'toolbar' ";

'</body>';

'<script> window.scrollBy (0,1); </script>';

'</html>';


END;



BLOCK browseDatabase;
browseCategories = { BROWSE_BY_ALBUM = { icon = 'html/images/iAlbumWhite.png', text = 'ALBUMS' }, 
					 BROWSE_BY_ARTIST = { icon = 'html/images/iArtistWhite.png', text = 'ARTIST' },
					 BROWSE_BY_GENRE = { icon = 'html/images/iGenreWhite.png', text = 'GENRES' },
					 BROWSE_MUSIC_FOLDER = { icon = 'html/images/iFolderWhite2.png', text = 'SETUP_AUDIODIR' },
					 BROWSE_BY_YEAR = { icon = 'html/images/iTimeWhite.png', text = 'BROWSE_BY_YEAR' },
					 BROWSE_NEW_MUSIC = { icon = 'html/images/iNewWhite.png', text = 'BROWSE_NEW_MUSIC' }, 
					 #PLUGIN_CUSTOMBROWSE = { icon = additionalLinks.icons.${'PLUGIN_CUSTOMBROWSE'}.replace('.png', "_40x30_f.png"), text = 'PLUGIN_CUSTOMBROWSE' } 
					 } -%]

<div id = "Database" class = "MenuPage panel" title = "[% 'IPENG_BROWSE_LIBRARY' | string %]" style = 'width: 320'>

<ul style = "font-size: 110%; margin-bottom: 8; margin-top: 0;">
[%- FOREACH cat = browseCategories.keys;
	IF additionalLinks.browse.$cat %]
		<li class = "biggerLine">
		<a href="[% webroot %][% additionalLinks.browse.$cat %]&player=[% playerURI %]" target="_self">
		<img src="[% webroot %][% browseCategories.$cat.icon %]" width="40" height="30" class = "paddedPic">&nbsp;
		<span class="secondary">[% browseCategories.$cat.text | string %]</span></a>
		</li>
	[%- END;
END;

'</ul>';

orderByList = {
	'album.titlesort'                                     => 'ALBUM',
	'album.year,album.titlesort'                          => 'SORT_YEARALBUM',
	'album.year,contributor.namesort,album.titlesort'     => 'SORT_YEARARTISTALBUM',
	'contributor.namesort,album.titlesort'                => 'SORT_ARTISTALBUM',
	'contributor.namesort,album.year,album.titlesort'     => 'SORT_ARTISTYEARALBUM',
	'genre.namesort,album.titlesort'                      => 'SORT_GENREALBUM',
	'genre.namesort,contributor.namesort,album.titlesort' => 'SORT_GENREARTISTALBUM',
} -%]

<!--label for="orderBy" class="backgroundtext">[% "SORT_BY" | string %]</label-->[%# 'ALBUMS' | string %]
<div class="backgroundtext" style = "float: left; padding-top: 0; margin: 8 0 0 3; width: 120" wrap>[% "IPENG_ALBUMSORT" | string %]</div>
<select class = "selectItems" name="orderBy" onChange="setAlbumOrderBy(selectedIndex,options[selectedIndex].value)">
[% FOREACH orderType = orderByList.keys.sort %]
	<option [% IF orderType == orderBy %]selected[% END %] value="[% orderType %]">[% orderByList.$orderType | string %]</option>
[% END;
'</select>';

IF additionalLinks.browseiPeng.PLUGIN_IPENG_CUSTOM_BROWSE_MORE;
	'<br><br>';
	PROCESS blDetails;
END;

PROCESS spacer;
'</div>';

END;

BLOCK browseLists %]
<div id = "Lists" class = "MenuPage panel" title = "[% 'IPENG_BROWSE_MORE' | string %]">
[%- PROCESS blDetails;
PROCESS spacer;
'</div>';

END;

BLOCK blDetails;
browseMoreCategories = { SAVED_PLAYLISTS = { icon = 'iPlaylistWhite.png', text = 'PLAYLISTS' }, 
						 FAVORITES = { icon = 'iFavoritesWhite.png', text = 'FAVORITES' }, 
#						 BROWSE_NEW_MUSIC = { icon = 'iNewWhite.png', text = 'BROWSE_NEW_MUSIC' }, 
						 PLUGIN_RANDOMPLAY = { icon = 'iRandomWhite.png', text = 'PLUGIN_RANDOMPLAY' } };
						 
temp = 'PLUGIN_IPENG_CUSTOM_BROWSE_MORE' | getstring;

browseMoreExclude = [ 'PLUGIN_IPENG_CUSTOM_BROWSE_MORE', temp ];


-%]
<ul  style = "font-size: 110%; margin: 0 0 8 0; ">
[%- FOREACH cat = browseMoreCategories.keys;
	IF additionalLinks.browse.$cat -%]
		<li class = "biggerLine">
		<a href="[% webroot %][% additionalLinks.browse.$cat %]&player=[% playerURI %]" target="_self">
		<img src="[% webroot %]html/images/[% browseMoreCategories.$cat.icon %]" width="40" height="30" class = "paddedPic">&nbsp;
		<span class="secondary">[% browseMoreCategories.$cat.text | string %]</span></a>
		</li>
	[%- END;
END -%]

	<!-- SEARCH -->
	<li class = "biggerLine">
	<a href="[% webroot %]search.html?&player=[% playerURI %]" target="_self">
	<img src="[% webroot %]html/images/iSearchWhite.png" width="40" height="30" class = "paddedPic">&nbsp;
	<span class="secondary">[% 'SEARCH' | string %]</span></a>
	</li>
[%- FOREACH link = additionalLinks.browseiPeng;
	temp = link.key | string;
	IF !browseCategories.keys.grep(link.key).size && !browseMoreCategories.keys.grep(link.key).size && !browseMoreExclude.grep(link.key).size && !browseMoreExclude.grep(temp).size -%]
		<li class = "biggerLine">
		<a href="[% webroot %][% link.value %]&player=[% playerURI %]" target="_self">
		[%- IF additionalLinks.icons.${link.key} -%]
			<img src="[% webroot %][% additionalLinks.icons.${link.key}.replace('.png', "_40x30_f.png") %]" width="40" height="30" class = "paddedPic">&nbsp;
		[%- ELSE -%]
			<img src="[% webroot %]html/images/blank.png" width="40" height="30" class = "paddedPic">&nbsp;
		[%- END -%]		
		<span class="secondary">[% link.key | string %]</span></a>
		</li>
	[%- END;
END;
FOREACH link = additionalLinks.searchiPeng;
	IF link.key != "SEARCHMUSIC" -%]
		<li class = "biggerLine">
		<a href="[% webroot %][% link.value %]&player=[% playerURI %]" target="_self">
		[%- IF additionalLinks.icons.${link.key} -%]
			<img src="[% webroot %][% additionalLinks.icons.${link.key}.replace('.png', "_40x30_f.png") %]" width="40" height="30" class = "paddedPic">&nbsp;
		[%- ELSE -%]
			<img src="[% webroot %]html/images/blank.png" width="40" height="30" class = "paddedPic">&nbsp;
		[%- END -%]		
		<span class="secondary">[% link.key | string %]</span></a>
		</li>
	[% END;
END;
'</ul>';
END;



BLOCK playerChoose;

USE Clients; players = Clients.get("id");

IF player_chooser_list %]
	<div id = "FullBG" style = "display: none"></div>
	<form id = "PCDiv" style="display: none;">
		<span style = "margin: 8">[% 'IPENG_SYNC_CHOOSE' | string %]</span>
		<span id="currentplayername" style="display: block; font-weight: bold; margin: 8; font-size: 120%;"></span>
		<span><br></span>
		<select id="synchronize" 
				name="synchronize" multiple 
				style = "
				-webkit-box-sizing: border-box;
				left: 0;
				font-size: 15;
			    min-width: 275;
				min-height: 38;">
			[% c_playername = ''; FOREACH playerobj IN players;
				IF player == playerobj.id;
					c_playername = playerobj.name;
				ELSE; -%]
					<option id = "player[% playerobj.id %]" value = "[% playerobj.id %]">[% playerobj.name %]</option>
				[% END;
			END -%]
			<option id = "playernone" value = "none" selected>[% 'SETUP_NO_SYNCHRONIZATION' | string %]</option>
		</select>
	    <a class="iButton white" 
		onclick = 'SyncSubmit();'
		href="[% webroot %]home.html"
		target = "_self"
		style = "
			 margin: 11 0 11 0;
			 padding: 5 0 0 0;
			 width: 298;
			 height: 42px;
			 text-align: center;
			 font-size: 15;
		     -webkit-box-sizing: border-box;
		     color: black;
		">[% 'SETUP_SYNCHRONIZE' | string %]</a>
	    <a class="iButton red" 
		onclick = "syncCancel();"
		href = "javascript:void(0);"
		target = "_self"
		style = "
			 margin: 11 0;
			 padding: 5 0 0 0;
			 width: 298;
			 height: 42px;
			 text-align: center;
			 font-size: 15;
		     -webkit-box-sizing: border-box;
		     color: white;
		">[% 'CANCEL' | string %]</a>
	</form>

	<form method="get" class = "backgroundtext" style = "margin: 0 11">
		<!--label for = "player" class = "backgroundtext" style = "position: absolute; float:left; margin: 0 16" >[% "CURRENT_PLAYER" | string %]</label-->
		<span class = "backgroundtext" style = "float:left; margin: 0; padding: 0; display: block;" >[% 'IPENG_PLAYER' | string %]</span>
		<select id="player" name="player" class = "selectItems" onChange="playerSubmit(this);" style = "float: right; max-width: 220; display: block; margin: -4 0 0 0;">
		[% FOREACH playerobj IN players %]
			<option id = "[% playerobj.id %]" value = "[% playerobj.id %]" [% IF player == playerobj.id %]selected[% END %]>[% playerobj.name %]</option>
		[% END %]
		<OPTGROUP label = "----" style = "text-align: center">
			<OPTION id="do_sync" value="sync">[% 'SETUP_SYNCHRONIZE' | string %]</OPTION>
		</OPTGROUP>
		</select>
	[% IF page %]<input type = 'hidden' name = 'page' value = '[% page %]'>[% END;
	IF playerid %]<input type = 'hidden' name = 'playerid' value = '[% playerid %]'>[% END;
	'<br>';
	'</form>';
ELSE;
	temp = '0'; FOREACH playerobj IN players;
		IF player == playerobj.id; temp = '1'; %]
				<span class = "backgroundtext">[% "IPENG_PLAYER" | string; " "; 
				IF playerobj.name;
					playerobj.name;
				ELSE;
					player;
				END; '</span>';
				'<br>';
		END;
	END;
	IF !temp %]
		<span class = "backgroundtext">[% "IPENG_PLAYER" | string %] [% "NONE" | string %]</span>
		<br>
	[% END;
END;

END;


BLOCK browseSettings %]
<div id = "browseSettings" class = "MenuPage panel" title = "[% 'SETTINGS' | string %]">
<ul  style = "font-size: 110%; margin-bottom: 8;">

	<li class = "biggerLine">
	<a href="[% webroot %]home.html?runAlarm=1"><!-- target="_onload:localOnload();"-->
	<img src="[% webroot %]html/images/iAlarmWhite.png" width="40" height="32" class = "paddedPic">&nbsp;
	<span class="secondary">[% 'ALARM' | string | truncate(20) %]</span></a>
	</li>
	<li class = "biggerLine">
	<a href="[% webroot %]home.html?runSleep=1"><!-- target="_onload:sleep.init();"-->
	<img src="[% webroot %]html/images/iSleepWhite.png" width="40" height="30" class = "paddedPic">&nbsp;
	<span class="secondary">[% 'SLEEP' | string | truncate(20) %]</span></a>
	</li>
	<li class = "biggerLine">
	<a href="[% webroot %]home.html?runRescan=1">
	<img src="[% webroot %]html/images/iRescanWhite.png" width="40" height="30" class = "paddedPic">&nbsp;
	<span class="secondary">[% 'IPENG_RESCAN' | string | truncate(20) %]</span></a>
	</li>
[% FOREACH link = additionalLinks.pluginsiPeng %]
	<li class = "biggerLine">
	<a href="[% webroot %][% link.value %]&player=[% playerURI %]" target="_self">
	[% IF additionalLinks.icons.${link.key} %]
		<img src="[% webroot %][% additionalLinks.icons.${link.key}.replace('.png', "_40x30_f.png") %]" height="30" class = "paddedPic">&nbsp;
	[% END %]		
	<span class="secondary">[% link.key | string | truncate (20) %]</span></a>
	</li>
[% END;

knownPlugins = { PLUGIN_PODCAST = 0,
				 PLUGIN_NOALBUMREVIEW = 0,
				 PLUGIN_NOBIOGRAPHY = 0,
				 PLUGIN_LYRICS_MODULE_NAME = 0 };

FOREACH link = additionalLinks.plugins;
	IF knownPlugins.keys.grep(link.key).size %]
		<li class = "biggerLine">
		<a href="[% webroot %][% link.value %]&player=[% playerURI %]" target="_self">
		[%- IF additionalLinks.icons.${link.key} %]
			<img src="[% webroot %][% additionalLinks.icons.${link.key}.replace('.png', "_40x30_f.png") %]" height="30" class = "paddedPic">&nbsp;
		[% END -%]
		<span class="secondary">[% link.key | string | truncate (20) %]</span></a>
		</li>
	[% END;
END;


%]
	<!-- SERVER SETTINGS -->
	<li class = "biggerLine">
	<a href="[% webroot %]settings/server/basic.html" target="_self">
	<!--img src="html/images/blank.png" width="40" height="30" style = "margin: 0; position: relative; float: left; top: -5;" alt = 'server settings'>&nbsp;-->
	<span class="secondary">[% 'SERVER_SETTINGS' | string | truncate(22) %]</span></a>
	</li>

	<!-- PLAYER SETTINGS -->
	<li class = "biggerLine">
	<a href="[% webroot %]settings/player/basic.html?player=[% playerURI %]&playerid=[% playerURI %]" target="_self">
	<!--img src="html/images/blank.png" width="40" height="30" style = "margin: 0; position: relative; float: left; top: -5;" alt = 'player settings'>&nbsp;-->
	<span class="secondary">[% 'PLAYER_SETTINGS' | string | truncate(22) %]</span></a>
	</li>
</ul>	
[% PROCESS spacer;
'</div>';
END;


BLOCK browseRadio %]
<form id = "Radio" class = "MenuPage panel" name="tune" method="get" action="status.html" target = "_self" title = '[% "RADIO" | string %]' style = 'background: none; width: 320'>
[% PROCESS tune_in_form %]
<ul style = "margin-left: 0;">
	[% IF additionalLinks.radios;
		linkHash = additionalLinks.radios;
		IF additionalLinks.radio;
			linkHash.import(additionalLinks.radio);
		END;
	ELSE;
		linkHash = additionalLinks.radio;
	END;
	FOREACH key = linkHash.keys %]
		<li>
			<a href="[% webroot %][% linkHash.$key %]player=[% playerURI %]" target="_self" style = "padding: 11 0 11 0">
			<img src="[% webroot %][% additionalLinks.icons.${key}.replace('.png', "_30x30_f.png") %]" width="30" class = "radioPic" style = "top: -7" alt="[% key | string %]">
			<span class="secondary" style = "font-size: 80%; padding-left: 5">[% key | string | truncate(26) %]</span></a>
		</li>
	[% END;
'</ul>';

IF additionalLinks.music_services;
	'<span class = "backgroundtext">'; 'MUSIC_SERVICES' | string; '</span>';
	'<ul>';
	FOREACH key = additionalLinkOrder.music_services %]
		<li class = "biggerLine">
			<a href="[% webroot %][% additionalLinks.music_services.$key | html %]player=[% playerURI %]" target="_self" >
			<img src="[% webroot %][% additionalLinks.icons.${key}.replace('.png', "_30x30_f.png") %]" width="30" class = "radioPic" alt="[% key | string %]">
			<span class="secondary" style = "font-size: 80%; padding-left: 5">[% key | string | html | truncate (26) %]</span></a>
		</li>
	[%- END;
	FOREACH link = additionalLinks.music_services; 
		IF !additionalLinkOrder.music_services.grep(link.key).size %]
		<li class = "biggerLine">
			<a href="[% webroot %][% link.value | html %]player=[% playerURI %]" target="_self">
			<img src="[% webroot %][% additionalLinks.icons.${link.key}.replace('.png', "_30x30_f.png") %]" width="30" class = "radioPic" alt="[% link.key | string %]">
			<span class="secondary" style = "font-size: 80%; padding-left: 5">[% link.key | string | html %]</span></a>
		</li>
	[%- END;
	END;
	IF additionalLinks.radios.exists('PLUGIN_PANDORA_MODULE_NAME') %]
		<li class = "biggerLine">
			<a href="[% webroot %][% additionalLinks.radio.PLUGIN_PANDORA_MODULE_NAME | html %]player=[% playerURI %]" target="_self">
			<span class="secondary" style = "font-size: 80%; padding-left: 5">[% "PLUGIN_PANDORA_MODULE_NAME" | string | html;
			'</span></a>';
		'</li>';
	END;
	'</ul>';
END;
PROCESS spacer;
'</form>';
END;

BLOCK tune_in_form %]
    <input type="hidden" name="p0" value="playlist">
    <input type="hidden" name="p1" value="play">
    <input type="hidden" name="player" value="[% player %]">
    <fieldset style = "margin-bottom: 8">
        <div class="row">
            <label>[% 'RADIO_TUNEIN_RADIOURL' | string %]</label>
            <input autosave="radiourl" name="p2"/>
        </div>
    </fieldset>
    <a class="iButton silver" onclick = 'document.forms["Radio"].submit();'
			style = "
				 margin: 0 11 11 0;
				 padding: 0px;
				 width: 278;
				 height: 30px;
				 text-align: center;
				 font-size: 15;
			">[% "RADIO_TUNEIN_CHOOSE" | string; '</a>';
END;


BLOCK homeTopbar %]
	<div id = 'topbar_vert'>
		<!--div class="coolioButton" 
			 href="[% webroot %]status.html?player=[% playerURI %]">
			<img src = "[% webroot %]html/images/coolioicon.png">
		</div-->
		<div style = 'position: absolute; right: 4; top: 4; z-index: 12;'>
			<a class="blackRight iButton"
				href="[% webroot %]status.html?player=[% playerURI %]"
				style = "color: white; width: 43; padding: 0; text-align: right;"
				target="_self">
				<img src = "[% webroot %]html/images/coolioicon.png" style = "padding-right: 10"></a>
		</div>
		
		<a id = "backButton1" class = "backButton" href="#" style = "-webkit-transform: translateX(320px); opacity: 0;"></a>
		<div id = "pageTitle1" class = "pageTitle" 
			 style = "-webkit-transform: translateX(320px); opacity: 0;"></div>
		<a id = "backButton2" class = "backButton" href="#" style = "-webkit-transform: translateX(320px); opacity: 0;"></a>
		<div id = "pageTitle2" class = "pageTitle" 
			 style = "-webkit-transform: translateX(320px); opacity: 0;"></div>
	</div>
[% END;


BLOCK spacer %]
<div style = "height: 48"></div>
[% END %]
